<script setup lang="ts">
import { reactive } from 'vue';

interface Emits {
  (e: 'clickCancel');
}

const emit = defineEmits<Emits>();
const state = reactive({
  visible: false,
  name: ''
});

const openDialog = (name: string) => {
  state.visible = true;
  state.name = name;
};
const clickCancel = () => {
  state.visible = false;
  emit('clickCancel');
};
defineExpose({
  openDialog
});
</script>

<template>
  <n-modal v-model:show="state.visible"
           :show-icon="false" :close-on-esc="false"
           :mask-closable="false"
           style="width: 900px;"
           preset="dialog" :title="'工具类 - ' + state.name">
    <n-tabs type="segment" animated>
      <n-tab-pane name="effect" tab="效果" display-directive="show">
        <slot name="effect"></slot>
      </n-tab-pane>
      <n-tab-pane name="code" tab="代码" display-directive="show">
        <slot name="code"></slot>
      </n-tab-pane>
      <n-tab-pane name="result" tab="结果" display-directive="show">
        <slot name="result"></slot>
      </n-tab-pane>
    </n-tabs>
    <template #action>
      <n-space>
        <n-button @click="clickCancel">关闭</n-button>
      </n-space>
    </template>
  </n-modal>
</template>

<style scoped>

</style>
